<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>验证框之提示自定义 - jQuery EasyUI 演示</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2 title="Custom ValidateBox Tooltip">验证框之提示自定义</h2>
	<p title="This sample shows how to display another tooltip message on a valid textbox.">　　本例展示如何在验证框上体现另外的提示框消息。</p>
	<div style="margin:10px 0;"></div>
	<div class="easyui-panel" title="<h title='Register'>&nbsp;注册</h>" style="width:100%;max-width:400px;padding:10px 20px;">
		<div style="margin-bottom:10px">
			账号：<input id="username" class="easyui-validatebox tb" style="width:320px" data-options="prompt:'请输入用户账号！',required:true,validType:'length[3,10]'">
		</div>
		<div style="margin-bottom:10px">
			邮箱：<input id="email" class="easyui-validatebox tb" style="width:320px" data-options="prompt:'请输入有效的电子邮件地址！',required:true,validType:'email'">
		</div>
		<div style="margin-bottom:10px">
			网址：<input id="url" class="easyui-validatebox tb" style="width:320px" data-options="prompt:'请输入有效的 URL！',required:true,validType:'url'">
		</div>
		<div style="margin-bottom:10px">
			电话：<input id="phone" class="easyui-validatebox tb" style="width:320px" data-options="prompt:'请输入电话号码（固话、手机均可）！',required:true">
		</div>
	</div>
	<style scoped="scoped">
		.tb{
			width:100%;
			margin:0;
			padding:5px 4px;
			border:1px solid #ccc;
			box-sizing:border-box;
		}
	</style>
	<script>
		$(function(){
			$('input.easyui-validatebox').validatebox({
				validateOnCreate: false,
				err: function(target, message, action){
					var opts = $(target).validatebox('options');
					message = message || opts.prompt;
					$.fn.validatebox.defaults.err(target, message, action);
				}
			});
		});
	</script>
</body>
</html>